<template>

	<div>

		<div class="app-container">
			<TopInfo />

			<div class="w-full mt-8">
				<el-button type="primary" size="small" @click="add">
					<template #default>
						<span class="text-sm">{{ $t('log.add') }}</span>
					</template>
				</el-button>
			</div>

		</div>

		<div class="app-container collapsetop">
			<el-collapse v-model="data.activeNames">
				<div v-for="item, key of data.list" :key="key">
					<el-collapse-item :name="item.id" class="basis">
						<template #title>
							<div class="h-8 text-base pl-4 mt-2 font-semibold relative flex w-full">
								<div class="w-1/3 text-left">{{ item.title }}</div>
								<div class="w-1/3">
									{{ item.version_no || $t('log.unVersion') }}
								</div>
								<div class="w-1/3 text-right pr-4">
									{{ getPlevel.gettime(item.create_time, 3) }}
								</div>
							</div>
						</template>
						<template #default>
							<div class="p-4">
								{{ item.content }}
							</div>

							<div v-if="key == 0" class="w-full pr-4 pt-4 text-right">
								<el-button type="warning" size="small" @click="modify(item)">
									{{ $t('public.modify') }}
								</el-button>
							</div>

						</template>
					</el-collapse-item>
				</div>
			</el-collapse>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
const { t: $t } = useI18n()
import TopInfo from '@/components/TopInfo/index.vue';
import getPlevel from '@/utils/level'
import { useRouter } from "vue-router";
import { getloglist } from '@/api/log';
const router = useRouter()

let data = reactive({
	activeNames: '',
	list: [], // 列表信息
})

// 获取列表信息
let getlist = () => {
	getloglist().then(res => {
		if (res.state == 200) {
			data.list = res.data
			if(res.data && res.data.length){
				data.activeNames =res.data[0].id || ''
				console.log(data.list)
			}
		}
	})
}

// 添加版本
let add = () => {
	router.push({ path: '/log/add_info' })
}

// 修改版本信息
let modify = (e) => {
	let query = {
		l: encodeURI(JSON.stringify({
			info: e
		}))
	}
	router.push({ path: '/log/details_info', query: query })
}

getlist()

</script>
<style type="text/css">
.collapsetop {
	padding-top: 10px;
}

.el-collapse {
	border-top: 0;
}

.basis .el-collapse-item__header {
	background: rgba(245, 245, 245);
	margin-top: 20px;
}

.basis .el-collapse-item__wrap {
	border: 1px solid rgba(245, 245, 245);
}
</style>